<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>内容解析</title>
    <link href="/common/icon2.png" type="image/png" rel="shortcut icon">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/common/article.css">
    <link rel="stylesheet" href="/highlight/styles/dracula.css">
</head>
<body>

<div class="layui-container" style="margin-top: 50px;width: 1400px;">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">文章标签</label>
            <div class="layui-input-block">
                <div class="xm-select-demo" id="cates" style="width: 300px;"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">系列</label>
            <div class="layui-input-block">
                <div class="xm-select-demo" id="series" style="width: 400px;"></div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文章 url</label>
            <div class="layui-input-block">
                <input name="url" placeholder="需要解析的文章 url" class="layui-input" autocomplete="off"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="parse">解析以浏览</button>
                <button class="layui-btn layui-bg-blue" lay-submit lay-filter="insert">解析并存储</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <a th:if="${#session==null || #session.getAttribute('user') == null}"
                   href="/login" class="layui-btn layui-bg-blue">登录</a>
                <a href="/list" class="layui-btn layui-bg-cyan">文章列表</a>
                <a th:if="${#session != null && #session.getAttribute('user') != null}"
                   href="/logout" class="layui-btn layui-bg-red">退出登录</a>
            </div>
        </div>
    </form>
    <hr>

    <div class="layui-tab layui-tab-card" id="resultTab">
        <ul class="layui-tab-title">
            <li class="layui-this"><i class="layui-icon layui-icon-template-1"></i> 解析内容结果</li>
            <li><i class="layui-icon layui-icon-tips"></i> 文章其他信息</li>
        </ul>
        <div id="contentTab" class="layui-tab-content layui-elip" style="overflow-y: auto;">
            <div class="layui-tab-item layui-show content" id="contentHtml"></div>
            <div class="layui-tab-item">
                <div class="layui-container">
                    <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>属性</th>
                            <th>值</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>文章作者</td>
                            <td id="author"></td>
                        </tr>
                        <tr>
                            <td>原始标题</td>
                            <td id="title"></td>
                        </tr>
                        <tr>
                            <td>发布时间</td>
                            <td id="publishTime"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/layui/layui.js"></script>
<script src="/highlight/highlight.min.js"></script>
<script src="/xmSelect/xmSelect.js"></script>
<script th:inline="javascript">
    layui.use(['form', 'jquery', 'element', 'layedit'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var element = layui.element;
        var layedit = layui.layedit;

        var cateXmSelectIns = xmSelect.render({
            el: "#cates",
            pageSize: 10,
            paging: true,
            height: '360px',
            data: [[${cates}]],
            layVerType: 'msg',
            tips: '搜索分类标签，如果没有将自动创建',
            searchTips: '输入搜索关键字，没有将自动创建',
            autoRow: true,
            filterable: true,
            create: function (val, arr) {
                var exist = false;
                for (var i = 0; i < arr.length; i++) {
                    var caName = arr[i].name;
                    if (caName === val) {
                        exist = true;
                        break;
                    }
                }
                if (!exist) {
                    return {
                        name: val,
                        value: val
                    }
                }
            }
        });

        var seriesXmSelectIns = xmSelect.render({
            el: "#series",
            name: "series",
            height: '360px',
            data: [[${series}]],
            layVerType: 'msg',
            tips: '文章系列版本，可多选',
            autoRow: true,
            filterable: true,
            prop: {
                name: 'name',
                value: 'id'
            }
        });

        //监听提交
        form.on('submit(parse)', function (data) {
            if (data.field.url === "" || !data.field.url) {
                layer.msg("url 不能为空！");
                return false;
            }
            var loadIndex = layer.load(2, {
                shade: [0.5, '#eee']
            });
            data.field.cates = cateXmSelectIns.getValue("value").join(" ");
            $.post("/article/doParse", data.field, function (resp) {
                layer.msg(resp.msg);
                if (resp.code === 0) {
                    $("#contentTab").css("height", $(window).height() - 330);
                    $("#pageType").text(resp.data.pageType)
                    $("#contentHtml").html(resp.data.content);
                    $("#author").html(resp.data.author);
                    $("#title").html(resp.data.title);
                    $("#publishTime").html(resp.data.publishTime);
                    hljs.highlightAll();
                    element.render();
                }
                layer.close(loadIndex);
            });
            return false;
        });
        form.on('submit(insert)', function (data) {
            data.field.cates = cateXmSelectIns.getValue("value").join(" ");
            if (data.field.cates === "" || !data.field.cates) {
                layer.msg("分类标签不能为空！");
                return false;
            }
            if (data.field.url === "" || !data.field.url) {
                layer.msg("url 不能为空！");
                return false;
            }
            var loadIndex = layer.load(2, {
                shade: [0.5, '#eee']
            });
            data.field.targetImgType = "UUID";
            $.post("/article/doInsert", data.field, function (resp) {
                layer.msg(resp.msg);
                layer.close(loadIndex);
            })
            return false;
        });
        $(window).resize(function () {
            var height = $(window).height() - 330;
            $("#contentTab").css("height", height + "px");
        })
    });
</script>
</body>
</html>